<template>
	<view class="warp">
		<view class="bg_top">
			<view class="icon" @click="cancenfn">
				<uni-icons type="closeempty" size="20"></uni-icons>
			</view>
			<view class="text_cont">
			  <view class="tc_txt">
			  	您运势报告已生成，深度解析内容包括： <span style="font-size: 38rpx;margin-left: 10rpx;"></span>
			  </view>
			  <view class="tc_txt_l">
				
			  </view>
			</view>
		</view>
		<view class="cont_box">
			
			<view class="cont_bg">
				<!-- <view class="text_top">
				 	
				 </view> -->
				<view class="text1">
				流年运势
				</view>
				<view class="text2">
				一生运程
				</view>
				<view class="text3">
				格局解读
				</view>
				<view class="text4">
					婚姻感情
				</view>
				<view class="text5">
					事业财运
				</view>
				<view class="text6">
					健康预警
				</view>
				<view class="text7">
					桃花姻缘
				</view>
			</view>
		</view>
		<view class="bottom_box" @click="toconfn">
			<view class="button">
				点击查看测算详情
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			toconfn(){
				uni.redirectTo({
					url:'/pages/index/report1'
				})
			},
			cancenfn(){
				uni.navigateTo({
					url:"/pages/index/constellation2/constellation2"
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
.warp{
	
	.bg_top{
		 height: 280rpx;
	     background: linear-gradient(to bottom , #92f5f0 30%, #FFFFFF);
	     position: relative;
	.text_cont{
		width: 100%;
		position: absolute;
		bottom: 50rpx;
		.tc_txt{
			    width: 100%;
				font-size: 36rpx;
				font-weight: 550;
				letter-spacing: 4rpx;
				text-align: center;
				padding: 0 100rpx;
		}
		.tc_txt_l{
			  width: 100%;
			  font-size: 28rpx;
			  letter-spacing: 4rpx;
			  text-align: center;
			  margin-top: 10rpx;
			  color: #cecece;
		   }
	    }
		.icon{
			position: absolute;
			top: 80rpx;
			right: 30rpx;
		}
	}
	.cont_box{
		// margin-top: 50rpx;
		padding: 0 90rpx;
		 
		.cont_bg{
			height: 500rpx;
			border-radius: 20rpx;
			background: linear-gradient(to bottom , #d2fe70 30%, #FFFFFF);
		    position: relative;
		  .text_top{
			  height: 200rpx;
		  }
		   .text1,.text2,.text3,.text4,.text5,.text6,.text7{
			   width: 260rpx;
			   height: 80rpx;
			   text-align: center;
			   line-height: 80rpx;
			   border-radius: 40rpx;
			   font-size: 38rpx;
			   letter-spacing: 8rpx;
			   
		   }
		   .text1{
			   background-color: #afffc0;
			   position: absolute;
			   left: -50rpx;
			   top: 40rpx;
		   }
		   .text2{
			   position: absolute;
			   right: -20rpx;
			   top: 60rpx;
			   background-color: #75fa8d;
		   }
		   .text3{
			   position: absolute;
			   right: 180rpx;
			   top: 150rpx;
			   background-color: #b1fca0;
		   }
		   .text4{
			   position: absolute;
			   left: -30rpx;
			   top: 240rpx;
			   background-color: #d1fe7a;
		   }
		   .text5{
		   			   position: absolute;
		   			   left: 30rpx;
		   			   top: 340rpx;
		   			   background-color: #a6fe80;
		   }
		   .text6{
		   			   position: absolute;
		   			   right: -30rpx;
		   			   top: 250rpx;
		   			   background-color: #c8fe62;
		   }
		   .text7{
		   			   position: absolute;
		   			   right: 10rpx;
		   			   top: 400rpx;
		   			   background-color: #b5fe66;
		   }
		}
		
	}
	.bottom_box{
		margin-top: 100rpx;
		text-align: center;
		.button{
			display: inline-block;
			width: 500rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-color: #000000;
			color: #fff;
			letter-spacing: 4rpx;
			font-weight: 550;
		}
	}
}
</style>
